<!-- src/views/CustomInputView.vue -->
<template>
  <div class="custom-input-view">
    <h1>9.3 自定义表单组件演示</h1>

    <div class="form-group">
      <label>用户名</label>
      <BaseInput
        v-model="form.username"
        icon="👤"
        placeholder="请输入用户名"
        :error="!!errors.username"
      />
      <span v-if="errors.username" class="error">{{ errors.username }}</span>
    </div>

    <div class="form-group">
      <label>邮箱</label>
      <BaseInput
        v-model="form.email"
        icon="✉️"
        type="email"
        placeholder="example@example.com"
        :error="!!errors.email"
      />
      <span v-if="errors.email" class="error">{{ errors.email }}</span>
    </div>

    <div class="form-group">
      <label>密码</label>
      <BaseInput
        v-model="form.password"
        icon="🔒"
        type="password"
        placeholder="至少6位"
        :error="!!errors.password"
      />
      <span v-if="errors.password" class="error">{{ errors.password }}</span>
    </div>

    <button @click="handleSubmit">提交</button>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import BaseInput from '@/components/BaseInput.vue'

const form = reactive({
  username: '',
  email: '',
  password: '',
})

const errors = ref({})

const validate = () => {
  const newErrors = {}
  if (!form.username) newErrors.username = '用户名不能为空'
  if (!form.email) newErrors.email = '邮箱不能为空'
  if (form.password.length < 6) newErrors.password = '密码至少6位'
  errors.value = newErrors
  return Object.keys(newErrors).length === 0
}

const handleSubmit = () => {
  if (validate()) {
    alert('提交成功！\n' + JSON.stringify(form, null, 2))
  }
}
</script>

<style scoped>
.custom-input-view {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}
.form-group {
  margin-bottom: 20px;
}
label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
}
.error {
  color: #e53e3e;
  font-size: 14px;
  margin-top: 4px;
  display: block;
}
button {
  padding: 10px 20px;
  background-color: #42b883;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>
